import React, { PureComponent } from 'react';
import { Icon} from 'antd';
import ImageGallery from 'react-image-gallery';
class ShowImage extends PureComponent {
  state = {
    startIndex:0
  };
  /**
   * 显示微博类型的
   * @param imageId
   */
  handleShowImageView =(imageId,index) => {
    this.setState({
      startIndex:index
    },() => {
      var targetImagePure=document.getElementById("imagePure"+imageId) ;
      var targetImageGallery=document.getElementById("imageGallery"+imageId) ;
      targetImagePure.style.display = "none";
      targetImageGallery.style.display = "inline";
    });
  }

  handleCancelImageView =(imageId) => {
    var targetImagePure=document.getElementById("imagePure"+imageId) ;
    var targetImageGallery=document.getElementById("imageGallery"+imageId) ;
    targetImagePure.style.display = "inline";
    targetImageGallery.style.display = "none";
  }
  render() {
    /*const  = "http://test22umake.oss-cn-beijing.aliyuncs.com/";*/
    const { imageSrc ,imageId} = this.props;
    const {startIndex} = this.state;
    if (imageSrc == undefined){
      return (
        <div >

        </div>
      );
    }
    const imagArrLength = imageSrc.length;
    var images = [];
    for(var index=0 ; index<imagArrLength ; index++){
      images.push({original: (imageSrc[index].url+"?x-oss-process=image/resize,m_fixed,w_500"),thumbnail: (imageSrc[index].url+"?x-oss-process=image/resize,m_fixed,h_52,w_52")});
    }
    if(imagArrLength == 0){
      return (
        <div >

        </div>
      );
    }else if(imagArrLength == 1){
      return (
        <div >
          <div id={"imagePure"+imageId}>
            <div>
              <img src={imageSrc[0].url} style={{width:110,height:110,marginLeft:5,marginTop:5,cursor:"pointer" }}  onClick={() => this.handleShowImageView(imageId,0) } />
            </div>
          </div>
          <div style={{display:"none"}} id={"imageGallery"+imageId}>
            <ImageGallery
              items={images}
              showFullscreenButton={false}
              showPlayButton={false}
              startIndex={startIndex}
              renderCustomControls={()=>{ return <a className='image-gallery-custom-action' onClick={()=>this.handleCancelImageView(imageId)} ><Icon type="to-top" />收起</a>}}
            />
          </div>
        </div>
      );
    }else if(imagArrLength == 2){
      return (
        <div >
          <div id={"imagePure"+imageId}>
            <div>
              <img src={imageSrc[0].url} style={{width:110,height:110,marginLeft:5,marginTop:5,cursor:"pointer" }}  onClick={() => this.handleShowImageView(imageId,0) } />
              <img src={imageSrc[1].url} style={{width:110,height:110,marginLeft:5,marginTop:5,cursor:"pointer" }}  onClick={() => this.handleShowImageView(imageId,1) } />
            </div>
          </div>
          <div style={{display:"none"}} id={"imageGallery"+imageId}>
            <ImageGallery
              items={images}
              showFullscreenButton={false}
              showPlayButton={false}
              startIndex={startIndex}
              renderCustomControls={()=>{ return <a className='image-gallery-custom-action' onClick={()=>this.handleCancelImageView(imageId)} ><Icon type="to-top" />收起</a>}}
            />
          </div>
        </div>
      );
    }else if(imagArrLength == 3){
      return (
        <div >
          <div id={"imagePure"+imageId}>
            <div>
              <img src={imageSrc[0].url} style={{width:110,height:110,marginLeft:5,marginTop:5,cursor:"pointer" }}  onClick={() => this.handleShowImageView(imageId,0) } />
              <img src={imageSrc[1].url} style={{width:110,height:110,marginLeft:5,marginTop:5,cursor:"pointer" }}  onClick={() => this.handleShowImageView(imageId,1) } />
              <img src={imageSrc[2].url} style={{width:110,height:110,marginLeft:5,marginTop:5,cursor:"pointer" }}  onClick={() => this.handleShowImageView(imageId,2) } />
            </div>
          </div>
          <div style={{display:"none"}} id={"imageGallery"+imageId}>
            <ImageGallery
              items={images}
              showFullscreenButton={false}
              showPlayButton={false}
              startIndex={startIndex}
              renderCustomControls={()=>{ return <a className='image-gallery-custom-action' onClick={()=>this.handleCancelImageView(imageId)} ><Icon type="to-top" />收起</a>}}
            />
          </div>
        </div>
      );
    }else if(imagArrLength == 4){
      return (
        <div >
          <div id={"imagePure"+imageId}>
            <div>
              <img src={imageSrc[0].url} style={{width:110,height:110,marginLeft:5,marginTop:5,cursor:"pointer" }}  onClick={() => this.handleShowImageView(imageId,0) } />
              <img src={imageSrc[1].url} style={{width:110,height:110,marginLeft:5,marginTop:5,cursor:"pointer" }}  onClick={() => this.handleShowImageView(imageId,1) } />
              <img src={imageSrc[2].url} style={{width:110,height:110,marginLeft:5,marginTop:5,cursor:"pointer" }}  onClick={() => this.handleShowImageView(imageId,2) } />
            </div>
            <div >
              <img src={imageSrc[3].url} style={{width:110,height:110,marginLeft:5,marginTop:5,cursor:"pointer" }}  onClick={() => this.handleShowImageView(imageId,3) } />
            </div>
          </div>
          <div style={{display:"none"}} id={"imageGallery"+imageId}>
            <ImageGallery
              items={images}
              showFullscreenButton={false}
              showPlayButton={false}
              startIndex={startIndex}
              renderCustomControls={()=>{ return <a className='image-gallery-custom-action' onClick={()=>this.handleCancelImageView(imageId)} ><Icon type="to-top" />收起</a>}}
            />
          </div>
        </div>
      );
    }else if(imagArrLength == 5){
      return (
        <div >
          <div id={"imagePure"+imageId}>
            <div>
              <img src={imageSrc[0].url} style={{width:110,height:110,marginLeft:5,marginTop:5,cursor:"pointer" }}  onClick={() => this.handleShowImageView(imageId,0) } />
              <img src={imageSrc[1].url} style={{width:110,height:110,marginLeft:5,marginTop:5,cursor:"pointer" }}  onClick={() => this.handleShowImageView(imageId,1) } />
              <img src={imageSrc[2].url} style={{width:110,height:110,marginLeft:5,marginTop:5,cursor:"pointer" }}  onClick={() => this.handleShowImageView(imageId,2) } />
            </div>
            <div >
              <img src={imageSrc[3].url} style={{width:110,height:110,marginLeft:5,marginTop:5,cursor:"pointer" }}  onClick={() => this.handleShowImageView(imageId,3) } />
              <img src={imageSrc[4].url} style={{width:110,height:110,marginLeft:5,marginTop:5,cursor:"pointer" }}  onClick={() => this.handleShowImageView(imageId,4) } />
            </div>
          </div>
          <div style={{display:"none"}} id={"imageGallery"+imageId}>
            <ImageGallery
              items={images}
              showFullscreenButton={false}
              showPlayButton={false}
              startIndex={startIndex}
              renderCustomControls={()=>{ return <a className='image-gallery-custom-action' onClick={()=>this.handleCancelImageView(imageId)} ><Icon type="to-top" />收起</a>}}
            />
          </div>
        </div>
      );
    }else if(imagArrLength == 6){
      return (
        <div >
          <div id={"imagePure"+imageId}>
            <div>
              <img src={imageSrc[0].url} style={{width:110,height:110,marginLeft:5,marginTop:5,cursor:"pointer" }}  onClick={() => this.handleShowImageView(imageId,0) } />
              <img src={imageSrc[1].url} style={{width:110,height:110,marginLeft:5,marginTop:5,cursor:"pointer" }}  onClick={() => this.handleShowImageView(imageId,1) } />
              <img src={imageSrc[2].url} style={{width:110,height:110,marginLeft:5,marginTop:5,cursor:"pointer" }}  onClick={() => this.handleShowImageView(imageId,2) } />
            </div>
            <div >
              <img src={imageSrc[3].url} style={{width:110,height:110,marginLeft:5,marginTop:5,cursor:"pointer" }}  onClick={() => this.handleShowImageView(imageId,3) } />
              <img src={imageSrc[4].url} style={{width:110,height:110,marginLeft:5,marginTop:5,cursor:"pointer" }}  onClick={() => this.handleShowImageView(imageId,4) } />
              <img src={imageSrc[5].url} style={{width:110,height:110,marginLeft:5,marginTop:5,cursor:"pointer" }}  onClick={() => this.handleShowImageView(imageId,5) } />
            </div>
          </div>
          <div style={{display:"none"}} id={"imageGallery"+imageId}>
            <ImageGallery
              items={images}
              showFullscreenButton={false}
              showPlayButton={false}
              startIndex={startIndex}
              renderCustomControls={()=>{ return <a className='image-gallery-custom-action' onClick={()=>this.handleCancelImageView(imageId)} ><Icon type="to-top" />收起</a>}}
            />
          </div>
        </div>
      );
    }else if(imagArrLength == 7){
      return (
        <div >
          <div id={"imagePure"+imageId}>
            <div>
              <img src={imageSrc[0].url} style={{width:110,height:110,marginLeft:5,marginTop:5,cursor:"pointer" }}  onClick={() => this.handleShowImageView(imageId,0) } />
              <img src={imageSrc[1].url} style={{width:110,height:110,marginLeft:5,marginTop:5,cursor:"pointer" }}  onClick={() => this.handleShowImageView(imageId,1) } />
              <img src={imageSrc[2].url} style={{width:110,height:110,marginLeft:5,marginTop:5,cursor:"pointer" }}  onClick={() => this.handleShowImageView(imageId,2) } />
            </div>
            <div >
              <img src={imageSrc[3].url} style={{width:110,height:110,marginLeft:5,marginTop:5,cursor:"pointer" }}  onClick={() => this.handleShowImageView(imageId,3) } />
              <img src={imageSrc[4].url} style={{width:110,height:110,marginLeft:5,marginTop:5,cursor:"pointer" }}  onClick={() => this.handleShowImageView(imageId,4) } />
              <img src={imageSrc[5].url} style={{width:110,height:110,marginLeft:5,marginTop:5,cursor:"pointer" }}  onClick={() => this.handleShowImageView(imageId,5) } />
            </div>
            <div >
              <img src={imageSrc[6].url} style={{width:110,height:110,marginLeft:5,marginTop:5,cursor:"pointer" }}  onClick={() => this.handleShowImageView(imageId,6) } />
            </div>
          </div>
          <div style={{display:"none"}} id={"imageGallery"+imageId}>
            <ImageGallery
              items={images}
              showFullscreenButton={false}
              showPlayButton={false}
              startIndex={startIndex}
              renderCustomControls={()=>{ return <a className='image-gallery-custom-action' onClick={()=>this.handleCancelImageView(imageId)} ><Icon type="to-top" />收起</a>}}
            />
          </div>
        </div>
      );
    }else if(imagArrLength == 8){
      return (
        <div >
          <div id={"imagePure"+imageId}>
            <div>
              <img src={imageSrc[0].url} style={{width:110,height:110,marginLeft:5,marginTop:5,cursor:"pointer" }}  onClick={() => this.handleShowImageView(imageId,0) } />
              <img src={imageSrc[1].url} style={{width:110,height:110,marginLeft:5,marginTop:5,cursor:"pointer" }}  onClick={() => this.handleShowImageView(imageId,1) } />
              <img src={imageSrc[2].url} style={{width:110,height:110,marginLeft:5,marginTop:5,cursor:"pointer" }}  onClick={() => this.handleShowImageView(imageId,2) } />
            </div>
            <div >
              <img src={imageSrc[3].url} style={{width:110,height:110,marginLeft:5,marginTop:5,cursor:"pointer" }}  onClick={() => this.handleShowImageView(imageId,3) } />
              <img src={imageSrc[4].url} style={{width:110,height:110,marginLeft:5,marginTop:5,cursor:"pointer" }}  onClick={() => this.handleShowImageView(imageId,4) } />
              <img src={imageSrc[5].url} style={{width:110,height:110,marginLeft:5,marginTop:5,cursor:"pointer" }}  onClick={() => this.handleShowImageView(imageId,5) } />
            </div>
            <div >
              <img src={imageSrc[6].url} style={{width:110,height:110,marginLeft:5,marginTop:5,cursor:"pointer" }}  onClick={() => this.handleShowImageView(imageId,6) } />
              <img src={imageSrc[7].url} style={{width:110,height:110,marginLeft:5,marginTop:5,cursor:"pointer" }}  onClick={() => this.handleShowImageView(imageId,7) } />
            </div>
          </div>
          <div style={{display:"none"}} id={"imageGallery"+imageId}>
            <ImageGallery
              items={images}
              showFullscreenButton={false}
              showPlayButton={false}
              startIndex={startIndex}
              renderCustomControls={()=>{ return <a className='image-gallery-custom-action' onClick={()=>this.handleCancelImageView(imageId)} ><Icon type="to-top" />收起</a>}}
            />
          </div>
        </div>
      );
    }else if(imagArrLength == 9){
      return (
        <div >
          <div id={"imagePure"+imageId}>
            <div>
              <img src={imageSrc[0].url} style={{width:110,height:110,marginLeft:5,marginTop:5,cursor:"pointer" }}  onClick={() => this.handleShowImageView(imageId,0) } />
              <img src={imageSrc[1].url} style={{width:110,height:110,marginLeft:5,marginTop:5,cursor:"pointer" }}  onClick={() => this.handleShowImageView(imageId,1) } />
              <img src={imageSrc[2].url} style={{width:110,height:110,marginLeft:5,marginTop:5,cursor:"pointer" }}  onClick={() => this.handleShowImageView(imageId,2) } />
            </div>
            <div >
              <img src={imageSrc[3].url} style={{width:110,height:110,marginLeft:5,marginTop:5,cursor:"pointer" }}  onClick={() => this.handleShowImageView(imageId,3) } />
              <img src={imageSrc[4].url} style={{width:110,height:110,marginLeft:5,marginTop:5,cursor:"pointer" }}  onClick={() => this.handleShowImageView(imageId,4) } />
              <img src={imageSrc[5].url} style={{width:110,height:110,marginLeft:5,marginTop:5,cursor:"pointer" }}  onClick={() => this.handleShowImageView(imageId,5) } />
            </div>
            <div >
              <img src={imageSrc[6].url} style={{width:110,height:110,marginLeft:5,marginTop:5,cursor:"pointer" }}  onClick={() => this.handleShowImageView(imageId,6) } />
              <img src={imageSrc[7].url} style={{width:110,height:110,marginLeft:5,marginTop:5,cursor:"pointer" }}  onClick={() => this.handleShowImageView(imageId,7) } />
              <img src={imageSrc[8].url} style={{width:110,height:110,marginLeft:5,marginTop:5,cursor:"pointer" }}  onClick={() => this.handleShowImageView(imageId,8) } />
            </div>
          </div>
          <div style={{display:"none"}} id={"imageGallery"+imageId}>
            <ImageGallery
              items={images}
              showFullscreenButton={false}
              showPlayButton={false}
              startIndex={startIndex}
              renderCustomControls={()=>{ return <a className='image-gallery-custom-action' onClick={()=>this.handleCancelImageView(imageId)} ><Icon type="to-top" />收起</a>}}
            />
          </div>
        </div>
      );
    }
  }
}

export default ShowImage;
